<!-- 表单项 -->
<template>
    <!-- 文本 -->
    <el-form-item v-if="item.type === 'text'" :key="item.field" :label="item.label" :label-width="currLabelWidth(item)" :style="item.style || {}">
        <el-input v-model="item.value" :disabled="item.disabled || false" clearable @change="handleItemChange(item)"></el-input>
    </el-form-item>
    <!-- 数字 -->
    <el-form-item v-else-if="item.type === 'number'" :key="item.field" :label="item.label" :label-width="currLabelWidth(item)" :style="item.style || {}">
        <el-input v-model="item.value" type="number" :disabled="item.disabled || false"></el-input>
    </el-form-item>
    <!-- 税率 -->
    <el-form-item v-else-if="item.type === 'taxRate'" :key="item.field" :label="item.label" :label-width="currLabelWidth(item)" :style="item.style || {}">
        <auto-numeric v-model="item.value" type="%2" :readOnly="item.disabled || false"></auto-numeric>
    </el-form-item>
    <!-- 选择器 -->
    <el-form-item v-else-if="item.type === 'select'" :key="item.field" :label="item.label" :label-width="currLabelWidth(item)" :style="item.style || {}">
        <el-tooltip class="item" :disabled="isMul(item.multiple, item.value)" :content="item.multipleContent" placement="top-start">
            <el-select v-if="item.change"
            v-model="item.value"
            :clearable="getClearable(item.clearable)"
            filterable :multiple="item.multiple"
            :collapse-tags="item.multiple" :disabled="item.disabled || false"
            @change="allChange(item.value, item.change, item)" @clear="item.change">
                <el-option v-for="(option, x) in item.options" :key="x" :label="option.label" :value="option.value"></el-option>
            </el-select>
        </el-tooltip>
        <el-select v-if="!item.change" v-model="item.value" :clearable="getClearable(item.clearable)" filterable :multiple="item.multiple" :collapse-tags="item.multiple" :disabled="item.disabled || false">
            <el-option v-for="(option, y) in item.options" :key="y" :label="option.label" :value="option.value"></el-option>
        </el-select>
    </el-form-item>
    <!-- 层级选择 { checkStrictly: item.checkStrictly,value:item.valueId,label: item.labelname,children: item.children } -->
    <el-form-item v-else-if="item.type === 'cascader'" :key="item.field" :label="item.label" :label-width="currLabelWidth(item)" :style="item.style || {}">
        <el-cascader v-model="item.value"
        :options="item.options"
        :show-all-levels="item.showAllLevels== false?item.showAllLevels:true"
        :props="item.cascaderProps"
        :clearable="getClearable(item.clearable)"
        @change="allChange(item.value, item.change, item)"
        ></el-cascader>
    </el-form-item>
    <!-- 数字区间 -->
    <el-form-item v-else-if="item.type === 'numberSection'" :key="item.field" :label="item.label" :label-width="currLabelWidth(item)" :style="item.style || {}" class="stage-form-item">
        <el-row class="sectionBox">
            <el-col :span="10">
                <auto-numeric v-model="item.options[0].value" :readOnly="item.disabled || false"></auto-numeric>
            </el-col>
            <el-col :span="4" style="text-align: center">至</el-col>
            <el-col :span="10">
                <auto-numeric v-model="item.options[1].value" :readOnly="item.disabled || false"></auto-numeric>
            </el-col>
        </el-row>
    </el-form-item>
    <!-- 百分比 区间 -->
    <el-form-item v-else-if="item.type === 'percentSection'" :key="item.field" :label="item.label" :label-width="currLabelWidth(item)" :style="item.style || {}" class="stage-form-item">
        <el-row class="sectionBox">
            <el-col :span="10">
                <auto-numeric v-model="item.options[0].value" type="%2" :readOnly="item.disabled || false"></auto-numeric>
            </el-col>
            <el-col :span="4" style="text-align: center">至</el-col>
            <el-col :span="10">
                <auto-numeric v-model="item.options[1].value" type="%2" :readOnly="item.disabled || false"></auto-numeric>
            </el-col>
        </el-row>
    </el-form-item>
    <!-- 日期区间 -->
    <el-form-item v-else-if="item.type === 'daterange'" :key="item.field" :label="item.label" :label-width="currLabelWidth(item)" :style="item.style || {}" class="stage-form-item">
        <el-row class="sectionBox">
            <el-col :span="!item.isNullVisible ? 24 : 20">
                <el-date-picker v-model="item.value" type="daterange" unlink-panels range-separator="至" start-placeholder="起" end-placeholder="止" size="mini" :append-to-body="true" :format="getDaterangeFormat(item.format || 'yyyy-MM-dd')" :value-format="getDaterangeFormat(item.format || 'yyyy-MM-dd')" :disabled="item.disabled || false" :picker-options="item.pickerOptions || {}" :clearable="item.clearable != null ? item.clearable : true"></el-date-picker>
                <slot v-if="item.slotName" :name="item.slotName"></slot>
            </el-col>
            <template v-if="item.isNullVisible">
                <el-col :span="4">
                    <el-checkbox v-model="item.defaultIsNull" @change="nullChange(val, item)">空</el-checkbox>
                </el-col>
            </template>
        </el-row>
    </el-form-item>
    <!-- 日期区间 -->
    <el-form-item v-else-if="item.type === 'datetimerange'" :key="item.field" :label="item.label" :label-width="currLabelWidth(item)" :style="item.style || {}" class="stage-form-item">
        <el-row class="sectionBox">
            <el-date-picker v-model="item.value" type="datetimerange" unlink-panels range-separator="至" start-placeholder="起" end-placeholder="止" size="mini" :append-to-body="true" :format="getDaterangeFormat(item.format || 'yyyy-MM-dd HH:mm:ss')" :value-format="getDaterangeFormat(item.format || 'yyyy-MM-dd HH:mm:ss')" :disabled="item.disabled || false"></el-date-picker>
        </el-row>
    </el-form-item>
    <!-- 月份区间 -->
    <el-form-item v-else-if="item.type === 'monthrange'" :key="item.field" :label="item.label" :label-width="currLabelWidth(item)" :style="item.style || {}" class="stage-form-item">
        <el-row class="sectionBox">
            <el-date-picker v-model="item.value" type="monthrange" unlink-panels range-separator="至" start-placeholder="起" end-placeholder="止" size="mini" :disabled="item.disabled || false" :append-to-body="true" :format="getDaterangeFormat(item.format || 'yyyyMM')" :value-format="getDaterangeFormat(item.format || 'yyyyMM')" :picker-options="item.pickerOptions || {}" :clearable="item.clearable != null ? item.clearable : true"></el-date-picker>
        </el-row>
    </el-form-item>
        <!-- 树形选择组件 -->
    <el-form-item v-else-if="item.type === 'treeSelect'" :key="item.field" :label="item.label" :label-width="currLabelWidth(item)" :style="item.style || {}" class="stage-form-item">
        <el-tree-select v-model="item.value" :z-index="9999" size="mini" :placeholder="item.placeholder || '请选择'" no-results-text="无匹配结果" no-options-text="没有可用选项" :multiple="item.multiple" :default-expand-level="2" :clearable="false || item.clearable" :options="item.options" :style="item.inputStyle || {}" :disable-fuzzy-matching="item.disableFuzzyMatching || false" :disabled="item.disabled || false" @select="node => {if (item.hasOwnProperty('select')) { item.select(node);} else { allChange(item.value, item.change, item)}}"></el-tree-select>
    </el-form-item>
    <!-- 年 -->
    <el-form-item v-else-if="item.type === 'year'" :key="item.field" :label="item.label" :label-width="currLabelWidth(item)" :style="item.style || {}" class="stage-form-item">
        <el-date-picker v-model="item.value" type="year" placeholder="选择年份" format="yyyy" value-format="yyyy" :picker-options="item.pickerOptions || {}" :disabled="item.disabled || false"></el-date-picker>
    </el-form-item>
    <!-- 月 -->
    <el-form-item v-else-if="item.type === 'month'" :key="item.field" :label="item.label" :label-width="currLabelWidth(item)" :style="item.style || {}" class="stage-form-item">
        <el-date-picker v-model="item.value" type="month" placeholder="选择月份" :format="getDaterangeFormat(item.format || 'yyyy-MM')" :value-format="getDaterangeFormat(item.format || 'yyyy-MM')" :picker-options="item.pickerOptions || {}" :disabled="item.disabled || false"></el-date-picker>
    </el-form-item>
    <!-- 日 -->
    <el-form-item v-else-if="item.type === 'date'" :key="item.field" :label="item.label" :label-width="currLabelWidth(item)" :style="item.style || {}" class="stage-form-item">
        <el-date-picker v-model="item.value" type="date" placeholder="选择日期" :format="getDaterangeFormat(item.format || 'yyyy-MM-dd')" :value-format="getDaterangeFormat(item.format || 'yyyy-MM-dd')" :disabled="item.disabled || false">
        </el-date-picker>
    </el-form-item>
    <!-- 日期时间 -->
    <el-form-item v-else-if="item.type === 'datetime'" :key="item.field" :label="item.label" :label-width="currLabelWidth(item)" :style="item.style || {}" class="stage-form-item">
        <el-date-picker v-model="item.value" type="datetime" placeholder="选择日期时间" :format="getDaterangeFormat(item.format || 'yyyy-MM-dd HH:mm:ss')" :value-format="getDaterangeFormat(item.format || 'yyyy-MM-dd HH:mm:ss')" :disabled="item.disabled || false">
        </el-date-picker>
    </el-form-item>
</template>

<script>
export default {
    name: 'MySearchItem',
    props: {
        // label宽度
        labelWidth: {
            type: String,
            default: '80px'
        },
        // 是否是常用查询
        base: {
            type: Boolean,
            default: false
        },
        // 表单项
        item: {
            type: Object,
            default: () => ({})
        },
        // 当前的下标
        index: {
            type: Number,
            default: 0
        },
        // 显示基本条件的个数
        baseNumber: {
            type: Number,
            default: 0
        }
    },
    methods: {
        currLabelWidth(item) {
            if (this.base && this.index < this.baseNumber) {
                return item.labelWidth || this.labelWidth;
            } else if (!this.base && this.index < this.baseNumber) {
                return this.labelWidth || item.labelWidth;
            } else {
                return item.labelWidth || this.labelWidth;
            }
        },

        getDaterangeFormat(format = 'yyyy-MM-dd') {
            return format;
        },

        /**
         * 处理 各种 change 事件
         */
        handleItemChange(item) {
            if (item.change) {
                item.change(item.value);
            }
        },

        getClearable(clearable) {
            return clearable === undefined ? true : clearable;
        },
        nullChange(val, item) {
            if (val) {
                item.value = [];
                item.disabled = true;
            } else {
                item.disabled = false;
            }
        },
        allChange(value, fun, item) {
            fun(value); //手动调用传递的过来的change方法
            if (item.multiple && Array.isArray(value) && value.length > 0) {
                let multipleContent = '';
                value.forEach(dom => {
                    multipleContent += item.options.find(el => el.value == dom).label + ',';
                });
                if (multipleContent.indexOf('全部') >= 0) {
                    multipleContent = '';
                } else {
                    multipleContent = multipleContent.substring(0, multipleContent.length - 1);
                }

                item.multipleContent = multipleContent;
            }
        },
        isMul(multiple, value) {
            if (multiple && Array.isArray(value) && value.length > 0 && value[0] !== '' && value[0] !== 'all') {
                return false;
            } else {
                return true;
            }
        },

    }
};
</script>
<style lang="scss" scoped>
.el-date-editor {
    width: 176px;
}
</style>
